<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>内置 Shapes</title>
  </head>

  <body>
    <div id="mountNode"></div>
    <script src="../build/minimap.js"></script>
    <script src="../build/g6.js"></script>
    <script>
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 600,
        defaultNode: {
          size: [40, 40],
        },
        modes: {
          default: ['zoom-canvas', 'drag-canvas'],
        },
      });
      graph.addItem('node', {
        id: 'circle',
        shape: 'circle',
        label: 'circle',
        x: 100,
        y: 100,
      });
      graph.addItem('node', {
        id: 'rect',
        shape: 'rect',
        label: 'rect',
        labelCfg: {
          position: 'top',
        },
        x: 550,
        y: 80,
        color: '#fe8550',
      });
      graph.addItem('node', {
        id: 'ellipse',
        shape: 'ellipse',
        label: 'ellipse',
        labelCfg: {
          position: 'right',
        },
        x: 300,
        y: 300,
        style: {
          fill: '#1890FF',
          stroke: '#1890FF',
        },
        size: [60, 40],
      });
      graph.addItem('node', {
        id: 'image',
        shape: 'image',
        label: 'image',
        labelCfg: {
          position: 'bottom',
        },
        img:
          'https://cdn.nlark.com/yuque/0/2019/png/174835/1553139586119-0360149e-a558-4712-9b71-3592dc1f52e4.png',
        x: 400,
        y: 500,
      });
      graph.addItem('edge', {
        id: 'edge0',
        source: 'circle',
        target: 'rect',
        label: 'line',
      });
      graph.addItem('edge', {
        id: 'edge1',
        source: 'circle',
        target: 'ellipse',
        shape: 'polyline',
        label: 'polyline',
        labelCfg: {
          position: 'center',
        },
        controlPoints: [
          {
            x: 100,
            y: 300,
          },
        ],
      });
      graph.addItem('edge', {
        id: 'edge2',
        source: 'ellipse',
        target: 'image',
        shape: 'cubic-vertical',
        labelCfg: {
          position: 'start',
          refY: -15,
        },
        label: 'cubic-vertical',
        size: 2,
      });
      graph.addItem('edge', {
        id: 'edge3',
        source: 'ellipse',
        target: 'rect',
        shape: 'quadratic',
        label: 'quadratic',
        controlPoints: [
          {
            x: 300,
            y: 80,
          },
        ],
        labelCfg: {
          autoRotate: true,
        },
      });
      graph.addItem('edge', {
        id: 'edge4',
        source: 'rect',
        target: 'rect',
        shape: 'loop',
        loopCfg: {
          dist: 60,
          position: 'bottom',
        },
        size: 2,
        style: {
          endArrow: true,
        },
      });
      graph.addItem('edge', {
        id: 'edge4',
        source: 'rect',
        target: 'rect',
        shape: 'loop',
        loopCfg: {
          dist: 90,
          position: 'bottom',
        },
        label: 'loop',
        labelCfg: {
          refY: -10,
        },
        size: 2,
        style: {
          endArrow: true,
        },
      });
      graph.addItem('edge', {
        id: 'edge5',
        source: {
          x: 550,
          y: 300,
        },
        target: {
          x: 600,
          y: 650,
        },
        label: 'standalone line',
      });
    </script>
  </body>
</html>
